<template>
  <div class="home">
    <v-container grid-list-md text-xs-center>
    <v-layout row wrap>
      <v-flex xs4>
        <v-card dark color="primary" style="height: 100%;" class="humanImg">
          <v-card-media src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1520576742&di=4334efe719a91ae4702b694ffcb86f36&src=http://pic20.nipic.com/20120507/7595446_130411037356_2.jpg" height="200px"></v-card-media>
        </v-card>
      </v-flex>
      <v-flex xs8>
        <v-card dark color="">
          <v-card-text class="px-0">
            <v-layout row wrap>
              <v-flex xs6 v-for="(ty,index) in initData">
                <!--:rules="nameRules"-->
              <v-text-field
                  v-if="ty.type != '职业'"
                  :label="ty.type"
                  v-model="initData[index].val"
                  @blur="initChange()"
                ></v-text-field>
                <v-select
                  v-else
                  :label="ty.type"
                  v-model="initData[index].val"
                  :items="zhiyeList"
                ></v-select>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    </v-container>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs6 v-for="(list, index) in attr" :key="index">
          <v-layout row wrap>
            <v-flex xs4>
              <v-card dark color="primary" class="nm_box">
                <v-card-text class="px-0" @click.stop="dialog3 = !dialog3" @click="cgText(index)">{{list.type}}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex xs4>
              <v-card dark color="primary" class="nm_box">
                <v-card-text class="px-0 val_box">{{list.val}}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex xs4>
              <v-layout row wrap>
                <!--<v-flex xs6 >-->
                  <!--<v-card dark color="primary" class="sm_fa_box">-->
                    <!--<v-card-text class="px-0 sm_box">-->
                      <!--+-->
                    <!--</v-card-text>-->
                  <!--</v-card>-->
                <!--</v-flex>-->
                <v-flex xs12>
                  <v-card dark color="primary" class="sm_fa_box">
                    <v-card-text class="px-0 sm_box">
                      {{parseInt(list.val/2)}}
                    </v-card-text>
                  </v-card>
                </v-flex>
                <!--<v-flex xs6 >-->
                  <!--<v-card dark color="primary" class="sm_fa_box">-->
                    <!--<v-card-text class="px-0 sm_box">-->
                      <!-- - -->
                    <!--</v-card-text>-->
                  <!--</v-card>-->
                <!--</v-flex>-->
                <v-flex xs12>
                  <v-card dark color="primary" class="sm_fa_box">
                    <v-card-text class="px-0 sm_box">
                      {{parseInt(list.val/5)}}
                    </v-card-text>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex xs12>
          <v-card dark color="primary">
            <v-card-text class="px-0" @click.stop="dialog3 = !dialog3" @click="rule()"><span><v-icon>info</v-icon></span>信息确定后点击下一步，根据年龄进行属性修正</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>

      <v-dialog v-model="dialog3" max-width="500px">
        <v-card>
          <v-card-title>
            <span style="text-indent: 2em" v-html="showText"></span>
          </v-card-title>
          <v-card-actions>
            <v-btn color="primary" flat @click.stop="dialog3=false">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-container>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs6>
          <v-btn color="success" @click="initHuman()">重新生成</v-btn>
        </v-flex>
        <v-flex xs6>
          <v-btn color="success" @click="goNext()">下一步</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        n: 0,
        m: 0,
        initData: [], // 玩家名、角色名、职业、年龄、性别、居住地
        dialog3: false,
        STR: 0, // 力量(STR)
        CON: 0, // 体质(CON)
        SIZ: 0, // 体型(SIZ)
        DEX: 0, // 敏捷(DEX)
        APP: 0, // 外貌(APP)
        INT: 0, // 智力(INT)
        POW: 0, // 意志(POW)
        EDU: 0, // 教育(EDU)
        LUK: 0, // 幸运(LUK)
        HP: 0,  // 生命
        MP: 0,  // 魔力
        SAN: 0, // 精神
        MOV: 0, // 移动力
        age: '', //
        num: 0, // 计算值
        typeDown: 0, // 根据年龄属性值减少总量
        jichushuxing: [ '', '', '', '', '', '' ],
//        addr: '', //
//        sex: '', //
//        zhiye: '', // 职业
        // 职业列表
        zhiyeList: ['会计师', '杂技演员', '戏剧演员', '电影演员', '中介调查员', '精神病医生（古典）', '动物训练师', '古文物学家（原作向）', '古董商', '考古学家（原作向）', '建筑师', '艺术家', '精神病院护工', '运动员', '作家（原作向）', '酒保', '猎人', '书商', '赏金猎人', '拳击手/摔跤手', '管家/侍者/女仆', '神职人员', '计算机程序员', '黑客（现代）', '牛仔', '工匠', '刺客', '银行劫匪', '打手', '窃贼', '欺诈师', '独行大盗', '女盗匪（古典）', '赃物贩子', '赝造者', '走私者', '混混', '教团首领', '除魅师（现代）', '设计师', '业余艺术爱好者（原作向）', '潜水员', '医生（原作向）', '流浪者', '私人司机', '司机', '出租车司机', '编辑', '政府官员', '工程师', '艺人', '探险家（古典）', '农民', '联邦探员', '消防员', '驻外记者', '法医', '赌徒', '黑老大', '马仔', '绅士/淑女', '游民', '勤杂护工', '调查记者', '通讯记者', '法官', '实验室助理', '非熟练工人', '伐木工', '矿工', '律师', '图书馆管理员（原作向）', '技师/技术工人', '军官', '传教士', '登山家', '博物馆管理员', '音乐家', '护士', '神秘学家', '旅行家', '超心理学家', '药剂师', '摄影师', '摄影记者', '飞行员', '特技飞行员（古典）', '警察/警探（原作向）', '巡逻警察', '私家侦探', '教授（原作向）', '淘金客', '性工作者', '精神病学家', '心理学家/心理分析学家', '研究员', '军舰海员', '民用船海员', '销售员', '科学家', '秘书', '店老板', '士兵/海军陆战队', '间谍', '学生/实习生', '替身演员', '部落成员', '殡葬师', '工会活动家', '服务生', '职员/主管', '中/高层管理人员', '狂热者', '饲养员'],
//        player: '',
//        playName: ''
        attr: [], // 9项属性值
        showText: '', // 弹框显示信息
        // 根据年龄判断显示哪一条信息
        ageIndex: 10,
        ageChange: ['15-19岁：力量和体型合计减5点。教育减５点。决定幸运值时可以骰2次并取较好的一次。', '20-39岁：对教育进行１次增强检定。', '40-49岁：对教育进行２次增强检定。力量体质敏捷合计减5点。外貌减5点。', '50-59岁：对教育进行３次增强检定。力量体质敏捷合计减10点。外貌减10点。', '60-69岁：对教育进行４次增强检定。力量体质敏捷合计减20点。外貌减15点。', '70-79岁：对教育进行４次增强检定。力量体质敏捷合计减40点。外貌减20点。', '80-89岁：对教育进行４次增强检定。力量体质敏捷合计减80点。外貌减25点。'],
        textList: [
          '力量是调查员肌肉能力的量化。力量越高，调查员就能举起更重的东西或更强有力的抓住物体。该属性会决定调查员在近战中造成的伤害。力量降低为０时，调查员就成为了一个无法离开床铺的病号。',
          '体质意味着健康、生气和活力。毒药和疾病会与调查员的体质属性正面相斗。高体质的调查员会有更多的生命值——能承受更多伤害和攻击。严重的物理损伤或魔法攻击有可能降低该属性，而当体质降为０时，调查员就死咯。',
          '体型值将身高和体重整合成了一个数字。伸长脖子越过矮墙观望，或者挤进狭窄的空间，或者判定谁的头在蹲下时也会高处草堆一个截时，就看体型了。体型可以帮助决定生命值和删改加值和体格。体型的减少通常意味着丢失肢体，当然这也意味着敏捷的减少。对于调查员来说，失去所有体型，应该意味着他消失了——只有上帝知道他在哪！',
          '高敏捷的调查员更为迅捷灵敏，肉体更加柔韧。敏捷检定可以帮助你在坠落中抓住支撑，或高速穿越敌人，或做到一些纤细的行动。敏捷降为０的调查员神经将会絮乱，无法完成任何物理行动。(在战斗中，高敏捷的角色会优先行动)',
          '外貌统括了肉体吸引力和人格魅力。高外貌的人潇洒而惹人喜爱，但不一定会有一副好面孔。外貌降为０的人恐怖而丑陋，有着十足令人厌恶的举止，走到哪都会引发议论和震动。(外貌会在社交遭遇中发生效用，或在试图给某人留下好印象时有所帮助)',
          '智力表示为调查员学习力、理解力、信息分析力和解密能力的优劣度。智力降为０的调查员就会如同婴儿般是个留涎的傻瓜。(智力决定了调查员的兴趣技能点的数量（ＩＮＴＸ２）。智力同样影响着灵感检定和智力检定)',
          '意志正是心意的力量；意志越高，学习和抵抗魔法的资质就越高。意志降为０的调查员如同行尸走肉，没有了“意念”，当然也无法使用魔法。除非特有说明，否则游戏中意志的降低会是永久性的。(理智点（ＳＡＮ）的游戏初始值等于角色的意志。意志同样决定了角色的魔法值。与意志不同的是，魔法值可以在游戏中消费并回复。魔法值等于意志的五分之一。对于普通人和调查员来说意志基本不会变动。不过对于那些克苏鲁神话的熟手来说，他们有可能使用法术来增加自己的意志。)',
          '教育属性是调查员所真正掌握的正规知识的量化，它表明了调查员在全日制学习中花费了多长时间。教育表示的是调查员保持的信息数量，而非机智应变使用信息的能力（那是智力的范畴）。教育为０的角色估计是新生儿或者失忆过——没有关于世界的常识，就会显得十分好奇而容易受骗。(教育决定了调查员初始可以获得多少的职业技能点。教育达到６０建议设定为受到高校教育，达到７０则可以视为受过数年大学教育。那些教育超过８０则基本上是在大学教育里名列前茅并且拿到了学位的人士，比如那些从有名的综合大学毕业出来的高材生。)',
          '创建调查员时，骰3d6，结果乘５，即是幸运值。'
        ]
      }
    },
    methods: {
      initHuman () {
        this.STR = this.sum(3, 6) * 5
        this.CON = this.sum(3, 6) * 5
        this.SIZ = (this.sum(2, 6) + 6) * 5
        this.DEX = this.sum(3, 6) * 5
        this.APP = this.sum(3, 6) * 5
        this.INT = (this.sum(2, 6) + 6) * 5
        this.POW = this.sum(3, 6) * 5
        this.EDU = (this.sum(2, 6) + 6) * 5
        this.LUK = this.sum(3, 6) * 5
        this.HP = Math.floor((this.CON + this.SIZ) / 10)
        this.attr = [
          { type: '力量(STR)', val: this.STR },
          { type: '体质(CON)', val: this.CON },
          { type: '体型(SIZ)', val: this.SIZ },
          { type: '敏捷(DEX)', val: this.DEX },
          { type: '外貌(APP)', val: this.APP },
          { type: '智力(INT)', val: this.INT },
          { type: '意志(POW)', val: this.POW },
          { type: '教育(EDU)', val: this.EDU },
          { type: '幸运(LUK)', val: this.LUK }
        ]
      },
      initChange () {
        if (this.initData[3].val) {
          let val = 0
          if (this.initData[3].val >= 15 && this.initData[3].val <= 19) {
            val = 1
          } else if (this.initData[3].val >= 20 && this.initData[3].val <= 39) {
            val = 2
          } else if (this.initData[3].val >= 40 && this.initData[3].val <= 49) {
            val = 3
          } else if (this.initData[3].val >= 50 && this.initData[3].val <= 59) {
            val = 4
          } else if (this.initData[3].val >= 60 && this.initData[3].val <= 69) {
            val = 5
          } else if (this.initData[3].val >= 70 && this.initData[3].val <= 79) {
            val = 6
          } else if (this.initData[3].val >= 80 && this.initData[3].val <= 89) {
            val = 7
          } else {
            this.showText = '请输入符合规则的年龄!'
            this.dialog3 = !this.dialog3
          }
          switch (val) {
            case 1:
              this.ageIndex = 0
              break
            case 2:
              this.ageIndex = 1
              break
            case 3:
              this.ageIndex = 2
              break
            case 4:
              this.ageIndex = 3
              break
            case 5:
              this.ageIndex = 4
              break
            case 6:
              this.ageIndex = 5
              break
            case 7:
              this.ageIndex = 6
              break
          }
        }
      },
      goNext () {
        let self = this
        let fg = 0
        $.each(self.initData, function (k) {
          if (self.initData[k].val == '') {
            self.showText = '信息填写不完整，请检查'
            self.dialog3 = !self.dialog3
            return false
          } else {
            fg++
          }
        })
        if (fg == 6) {
          let hm = {
            player: self.initData[0].val,
            playName: self.initData[1].val,
            zhiye: self.initData[2].val,
            age: self.initData[3].val,
            sex: self.initData[4].val,
            addr: self.initData[5].val,
            ageIndex: self.ageIndex,
            STR: self.STR,
            CON: self.CON,
            SIZ: self.SIZ,
            DEX: self.DEX,
            APP: self.APP,
            INT: self.INT,
            POW: self.POW,
            EDU: self.EDU,
            LUK: self.LUK
          }
//            self.gsData = JSON.stringify(self.gsData)
//            JSON.parse(localStorage.getItem('card'))
          hm = JSON.stringify(hm)
          localStorage.setItem('card', hm)
          self.$router.replace({ path: 'dtls' })
        }
      },
      cgText (i) {
        this.showText = this.textList[i]
      },
      rule () {
        this.showText = '15-19岁：力量和体型合计减5点。教育减５点。决定幸运值时可以骰2次并取较好的一次。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20-39岁：对教育进行１次增强检定。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40-49岁：对教育进行２次增强检定。力量体质敏捷合计减5点。外貌减5点。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50-59岁：对教育进行３次增强检定。力量体质敏捷合计减10点。外貌减10点。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60-69岁：对教育进行４次增强检定。力量体质敏捷合计减20点。外貌减15点。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70-79岁：对教育进行４次增强检定。力量体质敏捷合计减40点。外貌减20点。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80-89岁：对教育进行４次增强检定。力量体质敏捷合计减80点。外貌减25点。'
      },
      sum (n, m) {
        this.num = 0
        for (let i = 0; i < n; i++) {
          this.rd(m)
        }
        let vl = this.num
        return vl
      },
      rd (val) {
        this.num += parseInt(Math.random() * val, 10) + 1
      }
    },
    mounted () {
      this.initHuman()
      this.initData = [
        { type: '玩家', val: '' },
        { type: '角色名', val: '' },
        { type: '职业', val: '' },
        { type: '年龄', val: '' },
        { type: '性别', val: '' },
        { type: '居住地', val: '' }
      ]
    }
  }
</script>

<style scoped>
  .nm_box{
    height: 60px !important;
  }
  .nm_box .card__text{
    padding: 10px;
    width: 100%;
  }
  .val_box{
    padding: 18px !important;
  }
  .sm_fa_box{
    height: 25px !important;
  }
  .sm_box{
    padding: 3px;
  }
  .humanImg .card__media{
    height: 100% !important;
  }
</style>
